import React,{FC,useEffect,useRef} from 'react';

import style from './index.module.scss';

import {useSelector,useDispatch} from 'react-redux';

import {bindActionCreators} from 'redux';

// import {getBrandList} from '../../store/actions/offical.action';
import * as officalActions from '../../store/actions/offical.action'; 

import {OfficalState,LetterInter,brandInter} from '../../interface/offical';

import defaultImg from '../../static/imgs/bg.png';

import LazyImage from '../../components/lazyImage/index';

interface IState{
    offical:OfficalState
}

interface FunInter{
    scrollToElement:(index:number) => void;
}


const Official:FC = function (){

   const {brandList} = useSelector(({offical}:IState) => offical);
   //{offical:{},imgs:{}}

   const dispatch = useDispatch();

   const {getBrandList} = bindActionCreators(officalActions,dispatch);

   const scrollBox = useRef();
    // console.log(bindActionCreators(officalActions,dispatch))

    //    //{getBrandList:fn,getCarList:fn}
    // function bindActionCreators(actions,dispatch){
    //     return Object.keys(actions).reduce((prev,cur) => {
    //         prev[cur] = (...argv) => {
    //                 let params = actions[cur](...argv);
    //                 if(typeof params === 'function'){
    //                     params(dispatch)
    //                 }else{
    //                     dispatch(params)
    //                 }
    // //             
    //         }

    // dispatch(actions[cur](...argv))
    //     },{})
    // }

    //{getBrandList:fn1,getCarList:fn1}

   useEffect(() => {
    // getBrandList()(dispatch)
        getBrandList();
   }, [])

   const scrollTo = (index:number) => {
    (scrollBox.current as unknown as FunInter).scrollToElement(index);
    console.log("=====")
   }

    return <div className={style.wrap}>
        {/* 字母列表 */}
        <div className={style.letter}>
            <ul>
                {brandList.map((item:LetterInter,index:number) => <li key={item.title} onClick={() => scrollTo(index)}>{item.title}</li>)}
            </ul>
        </div>
        {/* 品牌列表 */}
        <LazyImage css={style.con} list={brandList} ref={scrollBox}>
            <section>
                {brandList.map((item:LetterInter) => <div key={item.title}>
                    <h4 className={style.title}>{item.title}</h4>
                    <ul className={style.brandList}>
                        {item.list.map((v:brandInter) => <li key={v.MasterID}>
                            <img data-src={v.CoverPhoto} src={defaultImg} alt=""/>
                            <span>{v.Name}</span>
                        </li>)}
                    </ul>
                </div>)}
            </section>
        </LazyImage>
    </div>
}


export default Official